import React, { FC } from 'react'
import { Link, useNavigate } from 'react-router-dom'
// import { useRequest } from 'ahooks'
import { LOGIN_PATHNAME } from '../router'
// import { getUserInfoService } from '../services/user'
import { UserOutlined } from '@ant-design/icons'
import { Button } from 'antd'
import { removeToken } from '../utils/user-token'
import useGetUserInfo from '../hooks/useGetUserInfo'
import { useDispatch } from 'react-redux'
import { logoutReducer } from '../store/userReducer'

const UserInfo: FC = () => {
  // const { data } = useRequest(getUserInfoService)
  // const { username, nickname } = data || {}
  const { username, nickname } = useGetUserInfo() // 从redux中获取用户信息
  const nav = useNavigate()
  const dispatch = useDispatch()
  const logout = () => {
    dispatch(logoutReducer()) // 清空user数据
    removeToken()
    nav(LOGIN_PATHNAME)
  }

  const UserInfo = (
    <>
      <span style={{ color: "#e8e8e8" }}>
        <UserOutlined />
        {nickname}
        <Button type='link' onClick={logout}>退出</Button>
      </span>
    </>
  )
  const Login = (
    <Link to={LOGIN_PATHNAME}>登录</Link>
  )
  return (
    <div>
      {username ? UserInfo : Login}
    </div>
  )
}

export default UserInfo